Because HTML and CSS are all rendered in the browser, you can actually use Developer Tools in the browser to rewrite a webpage locally so that you can preview what changes to the HTML and CSS would look like without actually writing them in code (related security note: for this reason, never trust a screenshot). The web inspector is super valuable because you can use it to see how CSS is actually being applied to a page, try quick edits on the fly, and then copy those changes to your clipboard to paste into your editor. All of the changes are automatically erased when you click Refresh, and you’re the only one who can ever see these changes (nothing is ever sent to the server).

Watch This Video for an Overview of the Web Inspector

All modern web browsers have an inspector and the web inspector generally works the same in all browsers once you have accesed it:

• In Chrome, you can right click on any element and select Inspect or go to the View menu, and select Inspect Elements
• In Safari, you need to first turn on developer tools by clicking on the Safari menu and selecting Preferences. Then, click Advanced and select Show Develop menu in the menu bar.
  • Once that has been completed, you can right click on any element and select Inspect Element or go to the Develop menu and select Show Web Inspector
• In Firefox, you can also right click on any element and select Inspect Element or click on the Tools menu, select Web Developer, and Inspector.